<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>非受控组件</title>
		<!-- 引入react核心库 -->
		<script type="text/javascript" src="../js/react.development.js"></script>
		<!-- 引入react-dom，用于支持react操作DOM -->
		<script type="text/javascript" src="../js/react-dom.development.js"></script>
		<!-- 引入babel，用于解析jsx为js -->
		<script type="text/javascript" src="../js/babel.min.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器 -->
		<div id="test"></div>

		<script type="text/babel">
			//定义组件
			class Login extends React.Component{
				//状态中的数据在使用前最好进行初始化
				state = {
					username:'',
					password:'',
					// subjects:[],
				}
				render(){
					return(
						<div>
							<form onSubmit={this.login}>
								用户名 <input onChange={this.saveUserName} type="text"/>	
								密码 <input onChange={this.savePassword} type="password"/>	
								<button>登录</button>
							</form>
							{/*
								<button onClick={this.createSubjects}>生成一些学科</button>
								<ul>
									{
										this.state.subjects.map((item,index)=>{
											return <li key={index}>{item}</li>
										})
									}
								</ul> 
							*/}
							</div>
					)
				}

				/* createSubjects = ()=>{
					this.setState({subjects:['前端','大数据','java']})
				} */
				
				//用户名发生改变的回调
				saveUserName = (e)=>{
					this.setState({username:e.target.value}) //将用户名存入state
				}

				//密码发生改变的回调
				savePassword = (e)=>{
					this.setState({password:e.target.value}) //将密码存入state
				}

				//登录按钮的回调
				login = (e)=>{
					e.preventDefault(); //阻止表单提交后跳转
					const {username,password} = this.state
					alert(`用户名是${username}，密码是${password}`)
				}
			}
			//渲染组件
			ReactDOM.render(<Login/>,document.getElementById('test'))
		</script>
	</body>
</html>
